<!DOCTYPE html>
<html lang="en">
<head>
    <title>Shower Presentation Engine</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="shower/themes/ribbon/styles/styles.css">
    <style>
        .shower {
            --slide-ratio: calc(16 / 9);
        }
        .layout {
            display: table;
            height: 100%;
            position: relative;
            width: 100%;
        }
        .layout__row {
            display: table-row;
            position: relative;
        }
        .layout__row_full {
            height: 100%;
        }
        .layout__col {
            display: table-cell;
            position: relative;
        }
        .layout-cover {
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .offset_20 {
            bottom: 20px;
            left: 20px;
            right: 20px;
            top: 20px;
        }
        .offset_b_20 {
            bottom: 20px;
        }
        .slide {
            padding-top: 20px;
        }
        .slide_gray {
            background-color: #e1e3e4;
        }
    </style>
</head>
<body class="shower list">

    <header class="caption">
        <h1>Дизайн-система. Как подружить дизайн и front-end.</h1>
        <p>Сухушин Александр, <a href="https://userstory.ru/">USERSTORY</a></p>
    </header>

    <section class="slide" id="intro">
        <h2 style="margin-top: 20%;">Дизайн-система.<br />Как подружить дизайн и front-end.</h2>
        <p>Сухушин Александр, <a href="https://userstory.ru/" target="_blank">USERSTORY</a></p>
    </section>

    <section class="slide" id="frontend">
        <img class="cover" src="pictures/frontend.png" alt="Фронтенд посередине">
    </section>

    <section class="slide slide_gray" id="problem">
        <div class="layout-cover offset_20">
            <img class="cover" src="pictures/problem.png" alt="Проблемы коммуникации дизайнеров и верстальщиков">
        </div>
    </section>

    <section class="slide" id="design-system">
        <h2>Дизайн-система</h2>
        <figure style="margin-top: 20%;">
            <blockquote>
                <p>Это постоянно эволюционирующий свод правил, который определяет порядок создания продукта.</p>
            </blockquote>
            <figcaption><a href="https://habrahabr.ru/company/everydaytools/blog/324774/" target="_blank">https://habrahabr.ru/company/everydaytools/blog/324774/</a></figcaption>
        </figure>
    </section>

    <section class="slide" id="layer-0-color">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Слой 0 - "Палитра"</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/layer-0-color.png" alt="Слой 0 - Цвет">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="layer-0-size">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Слой 0 - "Палитра"</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/layer-0-size.png" alt="Слой 0 - Размеры">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="layer-0-text">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Слой 0 - "Палитра"</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/layer-0-text.png" alt="Слой 0 - Текст">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="layer-1">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Слой 1 - "Базовые элементы"</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/layer-1.png" alt="Слой 1 - Базовые элементы">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide slide_gray" id="layer-2">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Слой 2 - "Составные элементы"</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/layer-2.png" alt="Слой 2 - Составные элементы">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="rules">
        <h2>Правила</h2>
        <ul style="margin-top: 20%;">
            <li>От общего к частному;</li>
            <li class="next">Описание разбивается на слои;</li>
            <li class="next">Для каждой сущности определяется псевдоним;</li>
            <li class="next">Сущности более частного слоя описываются из сущностей более общего.</li>
        </ul>
    </section>

    <section class="slide slide_gray" id="example-0-zeplin">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Примеры</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/example-0-zeplin.png" alt="Zeplin">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="example-1-vars">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Примеры</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/example-1-vars.png" alt="Переменные">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="example-2-text">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Примеры</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/example-2-text.png" alt="Текст">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="example-3-normalize">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Примеры</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/example-3-normalize.png" alt="Контент">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="example-4-responsive">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Примеры</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/example-4-responsive.png" alt="Адаптив">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="example-5-margin">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Примеры</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/example-5-margin.png" alt="Отступы">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="example-6-float">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Примеры</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/example-6-float.png" alt="Обтекание">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="example-7-width">
        <div class="layout">
            <div class="layout__row">
                <div class="layout__col">
                    <h2>Примеры</h2>
                </div>
            </div>
            <div class="layout__row  layout__row_full">
                <div class="layout__col">
                    <div class="layout-cover offset_b_20">
                        <img class="cover" src="pictures/example-7-width.png" alt="Ширина">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="profit">
        <h2>Преимущества</h2>
        <ul style="margin-top: 20%;">
            <li>Повторное использование;</li>
            <li class="next">Уменьшение накладных расходов;</li>
            <li class="next">Проще поддерживать и контролировать;</li>
            <li class="next">Параллельное описание дизайна и вёрстка.</li>
        </ul>
    </section>

    <div class="progress"></div>

    <script src="shower/shower.min.js"></script>
    <!-- Copyright © 2018 Yours Truly, Famous Inc. -->

</body>
</html>
